<template>
    <view class="page">
        <back :isBack="true" :title="'意见反馈'"></back>
        <view class="top_txt_box">感谢您鼓励我们前行,请选择您的问题类型</view>
        <view class="xuanze_box">
            <view class="dange_txt_box" :class="feedId == item.id ? 'dange_txt_box1' : ''"
                v-for="(item, index) in feedList" :key="index" @click="selFeed(item)">
                {{ item.type_name }}
            </view>
        </view>
        <view class="problem_box">问题描述</view>
        <view class="wenbenkuang_box">
            <textarea placeholder-style="color:gray" v-model="content" placeholder="请输入您的宝贵意见在这里吧" />
        </view>
        <view class="problem_box">图片（选填）</view>
        <view class="tupian_box">
            <view class="dangetp_box" v-if="imgList">
                <image :src="imgList" mode="scaleToFill" />
            </view>
            <!-- 上传 -->
            <view class="shangchuan_box">
                <u-icon name="plus" color="rgba(199, 199, 199, 1)" @click="upLoadimage" size="60"></u-icon>
            </view>
            <view style="width: 154rpx;" v-for="item in 3"></view>
        </view>
        <view class="tijiao" @click="$noMultipleClicks(submit)">提交</view>
    </view>
</template>
<script>
import back from "@/components/goback/goback"
export default {
    components: {
        back
    },
    data() {
        return {
            noClick: true,//防连点
            imgList: '',
            feedId: '',//当前选中
            feedList: [],
            filepath: '',//传给后端的本地路径
            content: '',//反馈内容

        }
    },
    onShow() {
        this.getfeedbackType()// 反馈意见列表
    },
    methods: {
        // 反馈意见列表
        getfeedbackType() {
            this.$Request.post(this.$api.word.feedbackType).then(res => {
                if (res.code == 200) {
                    this.feedList = res.data
                }
            })
        },
        selFeed(item) {
            this.feedId = item.id
        },
        upLoadimage() {
            uni.chooseImage({
                count: 1, //默认9
                sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album','camera'], //从相册选择
                success: (res) => {
                    console.log(res);
                    this.file = res.tempFilePaths[0]

                    var uploadurl = "https://build.lwjcg.com/api/feedback/upload?token=" + uni.getStorageSync("USERINFO")
                    uni.uploadFile({
                        url: uploadurl,
                        filePath: this.file,
                        name: 'img_url',
                        formData: {
                            'openid': uni.getStorageSync('openId')
                        },
                        success: (res) => {
                            let group = JSON.parse(res.data)
                            uni.showToast({
                                title: "上传成功",
                                icon: "success"
                            })
                            this.imgList = group.data.full_path
                            this.filepath = group.data.path
                        }
                    });
                }
            });


        },
        submit() {
            console.log(this.content)
            if (this.feedId == '') {
                uni.showToast({
                    title: '请选择问题类型',
                    icon: 'none'
                })
            } else if (this.content == '') {
                uni.showToast({
                    title: '请输入问题描述',
                    icon: 'none'
                })
            } else if (this.filepath == '') {
                uni.showToast({
                    title: '请上传问题图片',
                    icon: 'none'
                })
            } else {
                let data = {
                    type_id: this.feedId,
                    img_url: this.filepath,
                    content: this.content
                }
                this.$Request.post(this.$api.word.feedbackadd, data).then(res => {
                    if (res.code == 200) {
                        uni.showToast({
                            title: '提交成功',
                            icon: 'none'
                        })
                        setTimeout(() => {
                            uni.navigateBack()
                        }, 600)
                    }

                })
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.page {
    width: 100vw;
    height: 100vh;
    background-color: rgba(240, 240, 240, 1);
    position: relative;

    .top_txt_box {
        width: 100%;
        height: 50rpx;
        line-height: 50rpx;
        color: rgba(128, 128, 128, 1);
        font-size: 30rpx;
        box-sizing: border-box;
        padding: 0 36rpx;
        margin-top: 44rpx;
        margin-bottom: 32rpx;
    }

    .xuanze_box {
        width: 100%;
        box-sizing: border-box;
        padding: 0 36rpx;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;

        .dange_txt_box {
            padding: 0 20rpx;
            flex-shrink: 0;
            height: 54rpx;
            line-height: 54rpx;
            text-align: center;
            color: rgba(128, 128, 128, 1);
            font-size: 28rpx;
            font-weight: 400;
            background-color: rgba(255, 255, 255, 1);
            margin-right: 48rpx;
            margin-bottom: 32rpx;
            border-radius: 8rpx;

            &.dange_txt_box1 {
                color: rgba(255, 255, 255, 1);
                background: rgba(26, 194, 121, 1);
            }
        }

        .dange_txt_box:nth-child(3) {
            margin-right: 100rpx;
        }
    }

    .problem_box {
        width: 100%;
        height: 50rpx;
        line-height: 50rpx;
        box-sizing: border-box;
        padding: 0 42rpx;
        font-size: 30rpx;
        font-weight: 500;
        color: rgba(0, 0, 0, 1);
        margin-bottom: 30rpx;
    }

    .wenbenkuang_box {
        width: 704rpx;
        height: 298rpx;
        opacity: 1;
        border-radius: 28rpx;
        background: rgba(255, 255, 255, 1);
        margin: auto;
        box-sizing: border-box;
        padding: 40rpx 34rpx;
        font-size: 26rpx;
        margin-bottom: 46rpx;

    }

    .tupian_box {
        width: 704rpx;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin: auto;

        .dangetp_box {
            width: 154rpx;
            height: 132rpx;
            border-radius: 18rpx;
            margin-bottom: 10rpx;

            image {
                width: 100%;
                height: 100%;
                border-radius: 18rpx;
            }

        }

        .shangchuan_box {
            width: 154rpx;
            height: 132rpx;
            border-radius: 18rpx;
            background: rgba(255, 255, 255, 1);
            text-align: center;
            line-height: 150rpx;

        }
    }

    .tijiao {
        width: 652rpx;
        height: 100rpx;
        font-size: 40rpx;
        font-weight: 500;
        line-height: 100rpx;
        color: rgba(255, 255, 255, 1);
        opacity: 1;
        border-radius: 20rpx;
        background: rgba(26, 194, 121, 1);
        position: fixed;
        left: 0;
        right: 0;
        bottom: 100rpx;
        margin: auto;
        text-align: center;
    }
}
</style>